<template>
  <el-dialog
    :title="detailFlag == true ? '项目需求详情' : '项目需求审批详情'"
    v-model="checkDialogShow"
    width="1400px"
    class="dialogBox"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleBack"
  >
    <div class="dialog-top">
      <span>项目名称：{{ projectForm.projectName }}</span>
      <span>创建时间：{{ requestForm.createTime }}</span>
      <span>申请部门：{{ requestForm.deptName }}</span>
      <span v-if="detailFlag == false">审批类型：项目需求</span>
      <span v-if="detailFlag == true">审请类型：项目需求</span>
      <span style="color: #007cef"
        >审批状态：{{ requestForm.checkStatusName }}</span
      >
    </div>
    <div class="projectAdd" v-loading="detailInfoShow">
      <span
        slot="footer"
        class="dialog-footer"
        v-if="requestForm.checkStatus == 1 || requestForm.checkStatus == 2"
      >
        <div class="search-button" style="position: none" v-if="!detailFlag">
          <el-button
            class="btn search"
            @click="handleCheckBtn2(projectFormRef, 3, '同意')"
            ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
            >同意</el-button
          >
          <el-button
            class="btn withdraw"
            @click="handleCheckBtn2(projectFormRef, 4, '拒绝')"
            ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
            >拒绝</el-button
          >

          <el-button
            class="btn withdraw"
            @click="handleCheckBtn2(projectFormRef, 6, '驳回')"
            ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
            >驳回</el-button
          >

          <el-button class="btn direction" @click="handleBack"
            ><el-icon class="icon" color="#fff"> <Back /> </el-icon
            >返回</el-button
          >
        </div>
      </span>
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="基本信息" name="info">
          <el-collapse v-model="activeNames">
            <!-- 基础信息 -->
            <el-collapse-item name="1" class="transform-down">
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">需求信息</span>
              </template>

              <div>
                <el-descriptions
                  border
                  style="margin: 20px 0"
                  column="1"
                  label-align="center"
                  align="center"
                >
                  <el-descriptions-item
                    label="需求类型"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ requestForm.requirementTypeName }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="需求详情"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ requestForm.remark }}</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </el-collapse-item>
            <!-- 基本信息 -->
            <el-collapse-item name="2" class="transform-down">
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">基本信息</span>
              </template>
              <div>
                <el-descriptions
                  border
                  style="margin: 20px 0"
                  column="2"
                  label-align="center"
                  align="center"
                >
                <el-descriptions-item
                    label="项目编号"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.projectCode || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="商务进度"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.businessScheduleName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="业务人"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.businessName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="所属公司"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.companyName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目类型"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.projectTypeName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目种类"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.projectCategoryName || "--"
                    }}</el-descriptions-item
                  >

                  <el-descriptions-item
                    label="起止时间"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                    <template v-if="projectForm.startTime">
                      {{ projectForm.startTime }} 至 {{ projectForm.endTime }}
                    </template>
                    <template v-else> -- </template>
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="对接客户"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.customerName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目执行地"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                    <template v-if="projectForm.provinceName">
                      {{ projectForm.provinceName }}{{ projectForm.cityName
                      }}{{ projectForm.areaName }}
                    </template>
                    <template v-else> -- </template>
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="详细地址"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ projectForm.address || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目金额"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    ><template v-if="projectForm.money">
                      {{
                        userStore.deptType == 5 ? projectForm.money : "****"
                      }}元
                    </template>
                    <template v-else> -- </template></el-descriptions-item
                  >
                  <el-descriptions-item
                    label="是否签合同"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.includeContractName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="最终使用单位"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ projectForm.endUseUnit || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="使用单位联系人"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                    <template v-if="projectForm.unitContact">
                      {{
                        projectForm.unitContact +
                          "-" +
                          projectForm.unitContactInformation || "--"
                      }}
                    </template>
                    <template v-else>
                      <div>--</div>
                    </template>
                  </el-descriptions-item>
                  <!-- <el-descriptions-item
                    label="备注"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ projectForm.remarks || "--" }}</el-descriptions-item
                  > -->
                  <el-descriptions-item
                  label="备注"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  >{{ projectForm.remarks }}</el-descriptions-item
                >
                </el-descriptions>
              </div>
            </el-collapse-item>
            <!-- 甲方施工联系人 -->
            <el-collapse-item
              name="3"
              v-if="constructionData.length > 0"
              class="transform-down"
            >
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">甲方施工联系人</span>
              </template>
              <div class="contact-info">
                <el-table
                  :data="constructionData"
                  border
                  height="180px"
                  :header-cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column
                    label="姓名"
                    prop="name"
                    :show-overflow-tooltip="true"
                    min-width="160"
                  />
                  <el-table-column
                    label="联系方式"
                    prop="phone"
                    :show-overflow-tooltip="true"
                    min-width="160"
                  />
                  <el-table-column
                    label="备注"
                    prop="remarks"
                    :show-overflow-tooltip="true"
                    min-width="200"
                  />
                </el-table>
                <!-- 分页 -->
                <pagination
                  class="pagination"
                  :total="constructioTotal"
                  v-model:page="construction.pageNum"
                  v-model:limit="construction.pageSize"
                  @pagination="getConstructionList"
                />
              </div>
            </el-collapse-item>
            <!-- 销售清单 -->
            <el-collapse-item
              name="4"
              v-if="salesListData.length > 0"
              class="transform-down"
            >
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">销售清单</span>
              </template>
              <div class="contact-info">
                <el-table
                  :data="salesListData"
                  border
                  height="180px"
                  :header-cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column
                    label="销售类目"
                    prop="saleCategoryName"
                    :show-overflow-tooltip="true"
                    min-width="160"
                  />
                  <el-table-column
                    label="设备品牌"
                    prop="brand"
                    :show-overflow-tooltip="true"
                    min-width="160"
                  />
                  <el-table-column
                    label="设备/平台名称"
                    prop="saleName"
                    :show-overflow-tooltip="true"
                    min-width="160"
                  >
                    <template #default="scope">
                      {{ scope.row.saleName || "--" }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="数量"
                    prop="quantity"
                    :show-overflow-tooltip="true"
                    min-width="160"
                  />
                  <el-table-column
                    label="技术参数"
                    prop="technologyParameter"
                    :show-overflow-tooltip="true"
                    min-width="160"
                  />
                </el-table>
                <!-- 分页 -->
                <pagination
                  class="pagination"
                  :total="total"
                  v-model:page="params.pageNum"
                  v-model:limit="params.pageSize"
                  @pagination="getSaleList"
                />
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="审核日志" name="approval">
          <div id="print-iframe" v-if="flowInfoList.length">
            <!-- 步骤栏 -->
            <div :class="printFlag ? 'steps-print-box' : 'steps-box'">
              <el-steps
                direction="vertical"
                :class="flowInfoList.length > 7 ? 'BigSteps' : 'SmallSteps'"
                :active="flowingStep"
                finish-status="success"
              >
                <el-step v-for="(item, index) in flowInfoList" :key="index">
                  <template #title>
                    <div class="steps-top">
                      <div :title="item.name" style="width: 200px">
                        {{ item.name }}
                      </div>
                      <span class="steps-time">{{ item.createTime }}</span>
                    </div>
                  </template>
                  <template #description>
                    <div class="steps-box-info" v-if="item.auditEmpList.length">
                      <div
                        v-for="(child, index) in item.auditEmpList"
                        :key="index"
                      >
                        <div class="ription">
                          {{ child.createUserName }} {{ child.resultName }}
                        </div>
                        <div class="ription" v-if="child.remark">
                          处理意见： {{ child.remark }}
                        </div>
                        <div
                          class="line"
                          v-if="index + 1 != item.auditEmpList.length"
                        ></div>
                      </div>
                    </div>
                  </template>
                </el-step>
              </el-steps>
            </div>
            <!-- 表格数据 -->
            <!-- <el-table
              v-if="false"
              :data="auditList"
              border
              :height="'100%'"
              :header-cell-style="{ 'text-align': 'center' }"
              sum-text=""
              <el-table-column label="流程节点" prop="name" min-width="120">
              </el-table-column>
              <el-table-column
                label="审核人"
                prop="createUserName"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                label="审核时间"
                prop="createTime"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                label="审核意见"
                prop="resultName"
                min-width="120"
              >
              </el-table-column>
              <el-table-column label="审核备注" prop="remark" min-width="120">
              </el-table-column>
            </el-table> -->
          </div>

          <!-- <div v-else>暂无审核</div> -->
        </el-tab-pane>
      </el-tabs>

      <el-dialog
        :title="title"
        v-model="auditDialogShow"
        width="600px"
        style="margin-top: 20vh !important"
        append-to-body
      >
        <el-form-item label="审核备注：" label-width="100">
          <template #label>
                <i class="must-tip">*</i>
                审核备注：
              </template>
          <el-input
            style="width: 100%"
            v-model="auditRemark"
            placeholder=""
            type="textarea"
            maxlength="2000"
            clearable
          />
        </el-form-item>
        <template #footer>
          <div class="dialog-footer">
            <el-button
              style="color: #fff; background-color: rgba(67, 207, 124, 1)"
              v-if="auditResult == 3"
              @click="saveCheck()"
              v-loading="loadingCheck"
              >同意</el-button
            >
            <el-button
              style="color: #fff; background-color: rgba(245, 108, 108, 1)"
              v-if="auditResult == 4"
              @click="saveCheck()"
              v-loading="loadingCheck"
              >拒绝</el-button
            >
            <el-button
              style="color: #fff; background-color: rgba(245, 108, 108, 1)"
              v-if="auditResult == 6"
              @click="saveCheck()"
              v-loading="loadingCheck"
            >
              驳回</el-button
            >
            <el-button style="background-color: #fff" @click="closeAudit()"
              >取 消</el-button
            >
          </div>
        </template>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script setup>
import {
  selectSaleByProjectId,
  getProjectGetInfo,
  selectPracticeInfosByProjectId,
  requirementGetInfo,
  requirementCheck,
  selectAuditList,
} from "@/api/sales/projectRequirements";
import useUserStore from "@/store/modules/user";
import { ElMessage, ElMessageBox } from "element-plus";
const emit = defineEmits([
  // 项目新增组件显隐
  "requirementsCheckShow",
  // 更新项目新增组件显隐
  "update:requirementsCheckShow",
  // 刷新父组件表格数据
  "refreshList",
  // 更新跟进组件显隐
  "updateFollowAddShow",
]);
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});
//当前用户信息
const userStore = useUserStore();
// 折叠栏默认展开
const activeNames = ref(["1", "2", "3", "4", "5"]);
const activeName = ref("info");
// 详情加载效果
const detailInfoShow = ref(false);
//控制弹窗效果
const checkDialogShow = ref(false);
// 选择审核
const auditDialogShow = ref(false);
const loadingCheck = ref(false);
// 客户表单数据模板
const requestFormTemplate = {
  projectId: null, //关联项目
  projectCategoryName: "", //项目类型
  remark: "", // 需求描述
  requirementType: 0,
  type: 0, //按钮类型0：保存；1；提交
};
const data = reactive({
  // 客户表单
  requestForm: JSON.parse(JSON.stringify(requestFormTemplate)),
  //基本信息清单
  projectForm: {
    projectCode: "",
    executiveAddress: "",
    companyName: "",
    businessName: "",
    projectTypeName: "",
    projectCategoryName: "",
    startTime: "",
    endTime: "",
    customerName: "",
    industryName: "",
    address: "",
    money: "",
    includeContractName: "",
    warrantyStartTime: "",
    warrantyEndTime: "",
    remarks: "",
  },
  // 客户表单校验规则
  queryRules: {
    requirementType: [{ required: true, message: "请选择", trigger: "change" }],
    projectId: [
      { required: true, message: "请选择项目名称", trigger: "change" },
    ],
    remark: [
      { required: true, message: "请详细描述各类需求情况", trigger: "change" },
    ],
  },
  auditRemark: "", //审核备注
  auditResult: null, //审核类型
  applyId: null, //当前数据id
  endFlag: 0,
});
const {
  requestForm,
  projectForm,
  queryRules,
  auditRemark,
  auditResult,
  applyId,
  endFlag,
} = toRefs(data);
// 搜索参数
const params = reactive({
  pageNum: 1,
  pageSize: 50,
});
// 总数
const total = ref(0);
const construction = reactive({
  pageNum: 1,
  pageSize: 50,
});
//审核进度数据
const flowInfoList = ref([]);
//当前进度
const flowingStep = ref(0);
let auditList = ref([]);
// 总数
const constructioTotal = ref(0);
//施工联系人数据
const constructionData = ref([]);
//销售清单数据
const salesListData = ref([]);
const pageType = ref(props.pageType);
const detailFlag = ref(false);
/**
 * @description: 处理详情信息
 * @param {Number} id
 * @param {Number} detailFlagValue 区分详情、审核
 */
const handleDetailInfo = async (
  projectRequirementId,
  detailFlagValue = false,flowUuid = null
) => {
  try {
    detailFlag.value = detailFlagValue;
    checkDialogShow.value = true;
    detailInfoShow.value = true;
    // projectId: row.projectId,
    await requirementGetInfo({
      projectRequirementId: projectRequirementId,
    }).then((res) => {
      if (res.code == 200) {
        requestForm.value = { ...res.data.projectRequirementInfoRespVo };
        projectForm.value = res.data.projectInfoRespVo;
      }
    });
    // projectId: row.projectId,
    await selectPracticeInfosByProjectId(
      { pageNum: construction.pageNum, pageSize: construction.pageSize },
      {
        projectRequirementId: projectRequirementId,
      }
    ).then((res) => {
      if (res.code == 200) {
        constructionData.value = res.rows;
        constructioTotal.value = res.total;
      }
    });
    let { pageNum, pageSize } = params;
    // projectId: row.projectId,
    await selectSaleByProjectId(
      { pageNum, pageSize },
      {
        projectRequirementId: projectRequirementId,
      }
    ).then((res) => {
      if (res.code == 200) {
        salesListData.value = res.rows;
        total.value = res.total;
      }
    });
    const resAudit = await selectAuditList(projectRequirementId,flowUuid);
    console.log("流程");
    console.log(resAudit);
    auditList.value = resAudit.data;
    if (resAudit.data.length) {
      flowInfoList.value = resAudit.data;
      flowingStep.value = resAudit.data[0].flowingStep;
    }
    detailInfoShow.value = false;
  } catch (error) {
    detailInfoShow.value = false;
  }
};
/**
 * @description: 返回
 */
const handleBack = () => {
  emit("update:requirementsCheckShow", false);
  requestForm.value = JSON.parse(JSON.stringify(requestFormTemplate));
};
const handleCheckBtn2 = (requestFormRef, type, title) => {
  auditRemark.value = "";
  if (type == 3) {
    auditRemark.value = "同意";
  }

  auditResult.value = type;
  applyId.value = requestForm.value.projectRequirementId;
  auditDialogShow.value = true;
  loadingCheck.value = false;
};
const saveCheck = async () => {
  if (auditRemark.value === null || auditRemark.value === "") {
    ElMessage.error("审核备注不能为空");
    return;
  }

  const obj = {
    checkStatus: auditResult.value,
    projectRequirementId: applyId.value,
    auditRemark: auditRemark.value,
  };
  try {
    loadingCheck.value = true;

    const res = await requirementCheck(obj);
    auditDialogShow.value = false;

    if (res.code === 200) {
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
      return;
    }
    loadingCheck.value = false;
    emit("updateFollowAddShow", false);
    emit("update:requirementsCheckShow", false);
    emit("refreshList", false);
  } catch (error) {
    loadingCheck.value = false;
    emit("updateFollowAddShow", false);
    emit("update:requirementsCheckShow", false);
    emit("refreshList", false);

    // ElMessage.error(error);
  }
};
const closeAudit = () => {
  auditRemark.value = "";
  auditResult.value = "";
  applyId.value = "";
  auditDialogShow.value = false;
};
defineExpose({
  handleDetailInfo,
});
</script>

<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
  background-color: #f8faff;
}

.projectAdd {
  // padding: 20px 20px 0 20px;
  width: 100%;
  //   height: 100%;
  margin-bottom: 100px;
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
  .project-info {
    padding: 20px 20px 5px 20px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
  }
  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
  .search-button {
    // position: relative !important;
    position: static;
  }
  :deep(.el-step__head.is-success) {
    color: #3399ff;
    border-color: #3399ff;
    position: relative;
  }
  :deep(.el-step__title) {
    // font-size: 16px;
    // line-height: 38px;
    // position: absolute;
    // top: -38px;
    // width: 140px;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
  :deep(.el-step__title.is-success) {
    font-size: 14px;
    color: #333333;
  }
  :deep(.desLabel) {
    background: transparent !important;
    width: 200px;
    font-weight: 500 !important;
  }
  .desContent {
    // width: 100%;
    width: 330px;
     overflow: hidden;
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 使用省略号表示文字被截断 */
  }
  .pagination {
    margin-bottom: 20px;
  }
}
</style>

<style>
.dialogBox .el-dialog__title {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  line-height: 42px;
}

.dialogBox .el-dialog__body {
  padding: 0px 20px !important;
  height: 740px !important;
  overflow: auto;
}
.dialogBox .el-dialog__header {
  padding-bottom: 0 !important;
}
.custom-dropdown .dropdown-slot {
  height: 28px;
  line-height: 28px;
}

.custom-dropdown .scrollable-options {
  max-height: 200px; /* 根据需要设置合适的高度 */
  overflow-y: auto;
}

.dialogBox .dialog-top {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 42px;
  display: flex;
  justify-content: space-between;
  width: 70%;
  margin-bottom: 18px;
}

.dialogBox .dialog-footer {
  position: absolute;
  padding: 10px 20px 0px 0px;
  bottom: 0px;
  right: 0px;
  z-index: 2000;
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.steps-time {
  font-size: 14px;
  color: #666666;
  margin-left: 300px;
}
.steps-box-info {
  margin: 30px 0;
  padding: 10px;
  width: 630px;
  min-height: 56px;
  border: 1px solid #e6e6e6;
  .ription {
    margin-bottom: 10px;
  }
  .line {
    width: 100%;
    border: 1px solid #e6e6e6;
    margin-bottom: 10px;
  }
}
.steps-top {
  display: flex;
}
</style>
